<template>
    <div class="container mx-auto pt-24">
        <div class="flex flex-col lg:flex-row items-center justify-between">
            <div class="lg:w-2/5 space-y-8 text-center lg:text-left">
                <div class="flex items-center">
                    <img src="../public/icon.svg" class="w-6" />
                    <img src="../public/mxicon.svg" class="w-24" />
                </div>
                <div class="text-[clamp(2.5rem,8vw,5rem)] font-bold leading-tight text-shadow text-5xl">
                    重新定义<br />
                    <span class="bg-clip-text text-transparent bg-linear-65 from-purple-500 to-pink-500">
                        参数化设计
                    </span>
                </div>
                <p class="text-slate-600 dark:text-slate-300 text-lg md:text-xl max-w-lg mx-auto lg:mx-0">
                    E3让复杂变得简单，让效率触手可及。立即开始探索，体验前所未有的参数化体验。
                </p>

                <!-- 核心按钮区域 -->
                <div class="flex flex-col sm:flex-row gap-4 pt-4 justify-center lg:justify-start">
                    <a href="/guide" style="text-decoration: none;"
                        class="inline-flex items-center justify-center p-5 text-base font-medium text-gray-500 rounded-lg bg-gray-50 hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:bg-gray-800 dark:hover:bg-gray-700 dark:hover:text-white">
                        <i class="fa fa-rocket mr-2"></i>快速上手
                    </a>
                    <a href="/guide/download" style="text-decoration: none;"
                        class="inline-flex items-center justify-center p-5 text-base font-medium text-gray-500 rounded-lg bg-gray-50 hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:bg-gray-800 dark:hover:bg-gray-700 dark:hover:text-white">
                        <i class="fa fa-download mr-2"></i>下载安装
                    </a>
                    <a href="https://e3.ncf-china.com/" style="text-decoration: none;"
                        class="inline-flex items-center justify-center p-5 text-base font-medium text-gray-500 rounded-lg bg-gray-50 hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:bg-gray-800 dark:hover:bg-gray-700 dark:hover:text-white">
                        <i class="fa fa-comments mr-2"></i>论坛入口
                    </a>
                </div>

                <div
                    class="flex items-center space-x-2 text-slate-500 dark:text-slate-400 justify-center lg:justify-start">
                    <i class="fa fa-check-circle text-secondary"></i>
                    <span>已支持Windows和macOS</span>
                </div>
            </div>

            <!-- 应用展示图 -->
            <div class="lg:w-3/5 animate-float">
                <div class="relative">
                    <div
                        class="absolute inset-0 bg-gradient-to-r from-primary/20 to-accent/20 rounded-3xl blur-3xl -rotate-6">
                    </div>
                    <img src="../public/e3-app-screenshot.png" alt="E3应用界面展示"
                        class="relative rounded-2xl w-full max-w-screen mx-auto" />
                </div>
            </div>
        </div>
    </div>
</template>